import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core'
import { Router, ActivatedRoute } from '@angular/router'
import { Title } from '@angular/platform-browser'

@Component({
  selector: 'cp-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  @Input() leftArrow: boolean = true
  @Input() leftText: string
  @Input() title: string
  @Input() border: boolean = true
  @Input() bgColor: string = '#ffffff'
  @Input() rightText: string
  @Input() rightIcon: string
  @Input() zIndex: number = 9
  @Output() onClickLeft = new EventEmitter()
  @Output() onClickRight = new EventEmitter()

  currentClasses: any
  currentStyle: any

  constructor(private activatedRoute: ActivatedRoute, private router: Router, private titleService: Title) {}

  ngOnInit() {
    this.setCurrentClasses()
    this.setCurrentStyle()
    this.activatedRoute.data.subscribe(res => {
      if (!this.title) {
        this.title = res.title
        this.titleService.setTitle(res.title)
      } else {
        this.titleService.setTitle(this.title)
      }
    })
  }

  // 设置类
  setCurrentClasses() {
    let theme = ''
    // 没有设置背景颜色，或背景为白色，则默认为白底黑字
    if (!this.bgColor || this.bgColor === '#fff' || this.bgColor === '#ffffff') {
      theme = 'theme-dark'
    } else {
      theme = 'theme-light'
    }
    this.currentClasses = new Object()
    this.currentClasses[theme] = true
  }
  // 设置样式
  setCurrentStyle() {
    this.currentStyle = {
      'background-color': this.bgColor,
      zIndex: this.zIndex
    }
  }
  // 左侧emit
  handleLeft() {
    this.onClickLeft.emit()
  }
  // 右侧emit
  handleRight() {
    this.onClickRight.emit()
  }
}
